<?$this->_extends("_layouts/index_layout");?>

<?$this->_block("contents");?>

<script>
	$(function(){
	    $("img[class^='pi']").mouseover(function(){
	        $('embed').remove(); 
	        $('body').append('<embed src="<?=$_BASE_DIR?>images/btn.mp3" autostart="true" hidden="true" loop="false">');
	 		$("img[class^='pi']").each(function(){
	 			$(this).css('width','80px');
	 			$(this).css('margin-top','15px');
	 			$(this).css('margin-left','15px');
	 			$(this).css('margin-right','15px');
	 			$(this).css('margin-bottom','15px');
	 			$(this).attr('src','<?=$_BASE_DIR?>images/'+$(this).attr('class')+'.jpg')
	 		});
	 		$(this).css('width','110px');
	 		$(this).css('margin-top','0');
	 		$(this).css('margin-left','0');
	 		$(this).css('margin-right','0');
	 		$(this).css('margin-bottom','0');
	 		$(this).attr('src','<?=$_BASE_DIR?>images/'+$(this).attr('class')+'b.jpg');
	    });
	    $("img[class^='pi']").mouseout(function(){
	    	$(this).css('width','80px');
	 		$(this).css('margin-top','15px');
	 		$(this).css('margin-left','15px');
	 		$(this).css('margin-right','15px');
	 		$(this).css('margin-bottom','15px');
	 		$(this).attr('src','<?=$_BASE_DIR?>images/'+$(this).attr('class')+'.jpg')
	    });
	});
</script>
	<div id="main30" style="width:954px;" >
		<ul class="pi" >
			<li><a href="#" ><img class='pi1' src='<?=$_BASE_DIR?>images/pi1.jpg'/></a></li>
			<li><a href="#" ><img class='pi2' src='<?=$_BASE_DIR?>images/pi2.jpg'/></a></li>
			<li><a href="#" ><img class='pi3' src='<?=$_BASE_DIR?>images/pi3.jpg'/></a></li>
			<li><a href="#" ><img class='pi4' src='<?=$_BASE_DIR?>images/pi4.jpg'/></a></li>
			<li><a href="#" ><img class='pi5' src='<?=$_BASE_DIR?>images/pi5.jpg'/></a></li>
			<li><a href="#" ><img class='pi6' src='<?=$_BASE_DIR?>images/pi6.jpg'/></a></li>
			<li><a href="#" ><img class='pi7' src='<?=$_BASE_DIR?>images/pi7.jpg'/></a></li>
			<li><a href="#" ><img class='pi8' src='<?=$_BASE_DIR?>images/pi8.jpg'/></a></li>
			<li><a href="#" ><img class='pi9' src='<?=$_BASE_DIR?>images/pi9.jpg'/></a></li>
			<li><a href="#" ><img class='pi10' src='<?=$_BASE_DIR?>images/pi10.jpg'/></a></li>
			<li><a href="#" ><img class='pi11' src='<?=$_BASE_DIR?>images/pi11.jpg'/></a></li>
			<li><a href="#" ><img class='pi12' src='<?=$_BASE_DIR?>images/pi12.jpg'/></a></li>
			<li><a href="#" ><img class='pi13' src='<?=$_BASE_DIR?>images/pi13.jpg'/></a></li>
			<li><a href="#" ><img class='pi14' src='<?=$_BASE_DIR?>images/pi14.jpg'/></a></li>
		</ul>
	</div>
	<div class="cls"></div>
<?$this->_endblock();?>
